<template>
    <el-form
     ref="formRef"
      :model="courseFormData"
      label-width="120"
      :rules="rules"
     
    >
     <el-form-item prop="name" label="课程名称">
            <el-input v-model="courseFormData.name"  placeholder="请输入课程名称" style="width:90%"/>
      </el-form-item>
      <el-form-item label="时长(分钟)">
           <el-input-number
              v-model="courseFormData.duration"
              :min="0"
              controls-position="right"
              class="w40"
          />
      </el-form-item>
      <el-form-item label="课堂容纳人数">
           <el-input-number
              v-model="courseFormData.contains"
              :min="0"
              controls-position="right"
              class="w40"
          />
      </el-form-item>
      <el-form-item label="消耗次数/节">
           <el-input-number
              v-model="courseFormData.timesCost"
              :min="1"
              controls-position="right"
              class="w40"
          />
      </el-form-item>
      <el-form-item label="课程颜色">
      <el-color-picker v-model="courseFormData.color"  />
      </el-form-item>
      <el-form-item label="支持课程">
         <el-table
           ref="multipleTableRef"
           :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
          :data="courseList"
          style="width: 90%"
          size="small"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" />
          <!-- <el-table-column label="编号" prop="id"/> -->
          <el-table-column property="cardName" sortable label="会员卡"  />
          <el-table-column property="cardType" sortable label="会员卡类型" />
        </el-table>
      </el-form-item>
      <el-form-item label="课程描述">
          <WangEditor v-model:modelValue="courseFormData.introduce" class="editor-big"/>
      </el-form-item>
        <div  class="form-div">高级功能(对预约会员条件的限制)</div>
       <el-form-item label="限制性别">
          <template #label>
              <h4>限制性别</h4>
          </template>
            <el-select v-model="courseFormData.limitSex" placeholder="无限制" class="w20">
              <el-option label="无限制" value="None" />
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>  
      </el-form-item>
       <el-form-item label="限制年龄" > 
           <template #label><h4>限制年龄</h4></template>
          <el-radio v-model="courseFormData.limitAge"  value="none" >不限制</el-radio>
       </el-form-item>
       <el-form-item label="  ">
          <el-radio v-model="courseFormData.limitAge" :value="courseFormData.limitAge">
              <el-input v-model="courseFormData.limitAge" style="width:250px">
              <template #prepend>
              <span>大于</span>
              </template>
              <template #append>
              <span>岁</span>
              </template>
              </el-input>
          </el-radio>
        
      </el-form-item>
       <el-form-item label="限制次数">
          <template #label><h4>限制次数</h4></template> 
         <el-radio v-model="courseFormData.limitCounts"  value="none" >不限制</el-radio>
      </el-form-item>
       <el-form-item label="  ">
         <el-radio v-model="courseFormData.limitCounts" :value="courseFormData.limitCounts">
           <!-- <span class="form-span">每名会员最多可以预约本课程</span> -->
            <el-input v-model="courseFormData.limitCounts"  style="width:350px">
              
            <template #prepend>
            <span>每名会员最多可以预约本课程</span>
            </template>
            <template #append>
            <span>次</span>
            </template>
            </el-input>
            <!-- <span class="form-span">次</span> -->
        </el-radio>     
      </el-form-item>
    
      <el-form-item>
            <el-button type="primary" @click="savaCourse(ruleFormRef)">保存</el-button>
            <el-button @click="cancel">取消</el-button>
      </el-form-item>
      </el-form>
  
  </template>
  
  <script setup>
  import { ref, toRefs, reactive } from 'vue'
  const props = defineProps(['courseFormData', 'addEditDrawer', 'drawerTitle'])
  const emit = defineEmits(['update:addEditDrawer'])
  const { drawerTitle,courseFormData } = toRefs(props)
  //表单验证规则
  const rules=reactive({
      name:[
          {required: true,message: '请输入课程名',trigger: 'blur',},
      ]
  })
  
  //拿到表格对象
  const multipleTableRef = ref()
  //to 支持的课程需要调用接口 获取相关数据
  const  courseList = [
      {id:1,cardName:'金卡',cardType:'次卡(有限期)'},
      {id:2,cardName:'体验卡卡',cardType:'次卡(有限期)'},
      {id:3,cardName:'至尊卡',cardType:'次卡(无限期)'},
      {id:4,cardName:'测试卡',cardType:'次卡(有限期)'},
      {id:5,cardName:'超级卡',cardType:'次卡(无限期)'},
      {id:6,cardName:'测试卡1',cardType:'次卡(有限期)'},
  ]
  //当表格多选发生改变的时候 调用的方法
  const  handleSelectionChange = (val)=>{
       console.log('----val----',val)
       courseFormData.value.memberCardData=val
  }
  //保存添加或者修改会员开的数据 
  const savaCourse = () => {
      console.log('=========添加或者修改课程========')
      ElMessageBox.confirm(
          `确定要${drawerTitle.value}吗?`,
          '提示',
          {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
          }
      )
          .then(() => {
              //todo调用后端接口 保存
              //判断是添加会员卡还是修改会员卡
              //调用后端接口
              console.log('表单收集到的数据:',courseFormData.value)
  
              ElMessage({
                  type: 'success',
                  message: `${drawerTitle.value}成功`,
              })
          })
          .catch(() => {
              ElMessage({
                  type: 'info',
                  message: `取消${drawerTitle.value}操作`,
              })
          })
  }
  //取消 
  const cancel = () => {
      emit('update:addEditDrawer', false)
  }
  </script >
  <style lang="less" scoped>
   /deep/.el-color-picker__trigger{
      width:200px;
      height: 42px;
  }
  .form-div{
     border-bottom:1px solid #e0e0e0;
     padding:10px 50px; 
     font-size:24px;
     font-weight:200; 
     margin-bottom:20px
      
  }
  .w40{
      width:40%
  }
  .w20{
      width:20%
  }
  
  .editor-big{
      // width: 90%;
      border: 1px solid #c2c2c2;
      margin-bottom: 20px;
      
  }
  .form-span{
      display: inline-block;
      color:#676a6c;
      background-color:#eee;
      height: 32px;
      padding: 0px 8px;
      border-radius: 0 5px 5px 0;
  }
  </style>